<template>
  <div class="content" v-if="show">
    <!-- 表格 -->
    <div class="ttt">
      <el-table
        style="width: 100%"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        size="small"
        :data="newObj"
      >
        <el-table-column prop="jzt" label="解状态" width="70">
        </el-table-column>
        <el-table-column prop="wxs" label="卫星数" width="60">
        </el-table-column>
        <el-table-column prop="bh" label="测点编号" width="130">
        </el-table-column>
        <el-table-column prop="mh" label="WGS84-H(m)" width="130">
        </el-table-column>
        <el-table-column prop="mx" label="WGS84-x(m)" width="130">
        </el-table-column>
        <el-table-column prop="my" label="WGS84-y(m)" width="130">
        </el-table-column>
        <el-table-column prop="dh" label="WGS84-ΔH(mm)" width="140">
        </el-table-column>
        <el-table-column prop="dp" label="WGS84-Δp(mm)" width="140">
        </el-table-column>
        <el-table-column prop="dx" label="WGS84-Δx(mm)" width="140">
        </el-table-column>
        <el-table-column prop="dy" label="WGS84-Δy(mm)" width="140">
        </el-table-column>
        <el-table-column prop="cjsj" label="采集时间"> </el-table-column>
      </el-table>
    </div>
    <div id="linetable" class="linetable"></div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
import Highcharts from "highcharts";
import HighchartMore from "highcharts/highcharts-more";
import exportingInit from "highcharts/modules/exporting";
exportingInit(Highcharts);
HighchartMore(Highcharts);
HighchartMore(Highcharts);
export default {
  name: "RealTimeChart",
  data() {
    return {
      realTimeList: {},
      show: true,
      datas: null,
      newObj: [],
      LBHOption1: [],
      LBHOption2: [],
      LBHOption3: [],
      Times: [],
      sdata: "",
      sdatabd: "",
      realLineChart: null,
      sdataglon: "",
      date: null,
      realDataInterVal: null,
      realDataInterVals: null,
    };
  },
  props: {
    node: Object,
  },
  mounted() {
    this.date = moment().format("YYYY/MM/DD");
    this.realLineChart = Highcharts.chart("linetable", {
      title: { text: "" },
      lang: {
        viewFullscreen: "全屏",
        contextButtonTitle: "图表导出菜单",
        decimalPoint: ".",
        downloadJPEG: "下载JPEG图片",
        downloadPDF: "下载PDF文件",
        downloadPNG: "下载PNG文件",
        downloadSVG: "下载SVG文件",
        drillUpText: "返回 {series.name}",
        loading: "加载中",
        months: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        noData: "没有数据",
        numericSymbols: ["千", "兆", "G", "T", "P", "E"],
        printChart: "打印图表",
        resetZoom: "恢复缩放",
        resetZoomTitle: "恢复图表",
        shortMonths: [
          "Jan",
          "Feb",
          "Mar",
          "Apr",
          "May",
          "Jun",
          "Jul",
          "Aug",
          "Sep",
          "Oct",
          "Nov",
          "Dec",
        ],
        thousandsSep: ",",
        weekdays: [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期天",
        ],
      },

      xAxis: {
        title: { text: "时间" + this.date },
        labels: {
          formatter: (e) => {
            return this.Times[e.value];
          },
        },
      },
      yAxis: {
        title: {
          text: "位移(mm)",
          align: "high",
          offset: 0,
          rotation: 0,
          y: -15,
          x: 0,
        },
      },
      legend: {
        layout: "horizontal",
        align: "center",
        verticalAlign: "top",
        name: "高度",
        type: "mm",
      },
      tooltip: {
        dateTimeLabelFormats: {
          week: "%m:%u",
          day: "%H:%M:%S",
        },
        formatter: function () {
          return (
            "" +
            this.series.name +
            " " +
            Highcharts.numberFormat(this.y, 3, ".")
          );
        },
      },
      credits: {
        enabled: false, // 禁用版权信息
      },
      series: [{ name: "x方向" }, { name: "y方向" }, { name: "h方向" }],
      responsive: {
        rules: [
          {
            condition: {
              maxWidth: 500,
            },
            chartOptions: {
              legend: {
                layout: "horizontal",
                align: "center",
                verticalAlign: "bottom",
              },
            },
          },
        ],
      },
    });
  },
  methods: {
    //查询测点实时数据
    getStationRealTime(res) {
      let datass = res.data.parameter;
      let o1 = Number(datass.gxDisplacement * datass.gxDisplacement),
        o2 = Number(datass.gyDisplacement * datass.gyDisplacement);
      let tt = moment();
      var o3 = Number(datass.dhDisplacement);
      var o4 = Number(datass.gxDisplacement);
      var o5 = Number(datass.gyDisplacement);
      this.newObj.unshift({
        jzt: datass.status,
        wxs: datass.noOfSat,
        bh: datass.monitorCode,
        mh: Number(datass.dhdata).toFixed(3),
        mx: Number(datass.gxdata).toFixed(3),
        my: Number(datass.gydata).toFixed(3),
        dh: Number(datass.dhDisplacement).toFixed(3),
        dp: Math.sqrt(o1 + o2).toFixed(3),
        dx: Number(datass.gxDisplacement).toFixed(3),
        dy: Number(datass.gyDisplacement).toFixed(3),
        cjsj: datass.createTime,
      });

      this.newObj.length > 10 ? this.newObj.splice(10, 1) : null;

      this.LBHOption1.push(o4);
      console.log(this.LBHOption1);
      this.Times.push(tt.format("HH:mm:ss"));
      if (this.LBHOption1.length > 20) {
        this.LBHOption1.splice(0, 1);
        this.Times.splice(0, 1);
      }
      this.LBHOption2.push(o5);
      if (this.LBHOption2.length > 20) {
        this.LBHOption2.splice(0, 1);
      }
      this.LBHOption3.push(o3);
      if (this.LBHOption3.length > 20) {
        this.LBHOption3.splice(0, 1);
      }

      if (this.realLineChart.series) {
        this.realLineChart.series[0].setData(this.LBHOption1);
        this.realLineChart.series[1].setData(this.LBHOption2);
        this.realLineChart.series[2].setData(this.LBHOption3);
      }
    },
    //发请求
    getAxios() {
      this.realDataInterVal = setInterval(() => {
        axios
          .get(
            "/realData/getRealData/" +
              this.node.monitorTypeId +
              "/" +
              this.node.monitorCode
          )
          .then((res) => {
            // console.log(res);
            let time = res.data.parameter.createTime;
            if (localStorage.getItem("prevTime") !== null) {
              if (localStorage.getItem("prevTime") === time) {
                alert("站点掉线");
                return false;
              } else {
                this.getStationRealTime(res);
              }
            } else {
              localStorage.setItem("prevTime", time);
              this.getStationRealTime(res);
            }
          });
      }, 1000);
    },
  },

  created() {
    if (this.$route.params.enterprise == "makeng") {
      this.getAxios();
    } else if (this.$route.params.enterprise == "qiucheng") {
      this.getAxios();
    }
  },
  beforeDestroy() {
    this.$once("hook:beforeDestroy", () => {
      clearInterval(this.realDataInterVal);
    });
    this.$once("hook:beforeDestroy", () => {
      clearInterval(this.realDataInterVals);
    });
  },
};
</script>
<style scoped>
.content {
  height: 83vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.ttt {
  width: 100%;
  overflow: auto;
}
.ttt >>> .el-table tr:nth-child(odd) {
  /* background: pink; */
  text-align: center !important;
  color: #000;
  font-size: 12px;
}
.ttt >>> .el-table tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.05);
  /* background: #cfeed2; */
  text-align: center !important;
  color: #000;
  font-size: 12px;
}
.linetable {
  margin-top: 30px;
  height: 370px;
  /* overflow: auto; */
}
</style>